Google Maps Directions to Your Business
Want to give your PURL visitors directions from their address to your business. Google Maps API makes this extremely easy!
1. Obtain an API Key
To create your API key, visit the APIs Console at https://code.google.com/apis/console and log in with your Google Account.
Click the Services link from the left-hand menu, then activate the Google Maps API v2 service.
Once the service has been activated, your API key is available from the API Access page, in the Simple API Access section. Maps API applications use the Key for browser apps.
2. Open the index.php (PURL Landing Page) to edit.
You'll need to open your index.php landing page to add the API to your PURL landing page. If you installed the campaign on your server, this page is located at in a folder named purlpage_<your campaign> If you used InstantPURL™, request FTP access (In Purlem's dashboard, click on the Landing Page tab > Request FTP Access)
3. Add the following Javascript with the <head> section of the page:
Replace <Your API Key from Step 1> and <Your Address You Want Directions To> with the appropriate values.
<script src="//maps.google.com/maps?file=api&v=2.x&key=<Your API Key from Step 1>" type="text/javascript"></script>
<script type="text/javascript">
var map = null;
var geocoder = null;
var directionsPanel;
var directions;
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
geocoder = new GClientGeocoder();
directionsPanel = document.getElementById("route");
directions = new GDirections(map, directionsPanel);
directions.load("from: <?php echo $visitor->{'address'}; ?>, <?php echo $visitor->{'city'}; ?>, <?php echo $visitor->{'state'}; ?> to: <Your Address You Want Directions To>");
}
}
function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
// As this is user-generated content, we display it as
// text rather than HTML to reduce XSS vulnerabilities.
//marker.openInfoWindow(document.createTextNode(address));
}
}
);
}
}
</script>
4. Replace <body> tag
Replace the <body> tag with: <body onload="initialize()" onunload="GUnload()">
5. Display the Map and Directions
Add the code below where you would like to map and directions to appear.
<div id="map_canvas" style="width: 500px; height: 300px"></div> <div id="route"></div>
6. That's It!
Save your work, upload, sit back and admire your handy work!